<template>
  <div>
      <div style="position:fixed;width:100%;height:100%;z-index:6000;" v-show="spinnerShow">
          <spinner style="position:absolute;top:50%;left:50%;margin-left:-14px;margin-top:-14px;"></spinner>
      </div>
      <Top title="取现确认" iconShow="1"></Top>
      <div class="item">
        <div class="item-list"><div class="item-list-left">取现金额</div><div class="item-list-right"><em style="font-size:0.64rem;color:#ff7a7b;">{{methodList.money}}</em>元</div></div>
        <div class="item-list"><div class="item-list-left">到账金额</div><div class="item-list-right"><em style="font-size:0.64rem;color:#ff7a7b;">{{methodList.reachMoney}}</em>元</div></div>
        <div class="item-list"><div class="item-list-left">手续费</div><div class="item-list-right"><em style="font-size:0.5333rem;">{{methodList.shouxufei}}</em>元<i @click="msg"></i></div></div>
        <div class="item-list"><div class="item-list-left">取现卡</div><div class="item-list-right"><img :src="methodList.borrowCodeBankImgUrl" alt=""><span>{{methodList.borrowName}}（{{methodList.borrowCardNo}}）</span></div></div>
        <div class="item-list"><div class="item-list-left">到账卡</div><div class="item-list-right"><img :src="methodList.reachCardBankImgUrl" alt=""><span>{{methodList.reachName}}（{{methodList.reachCardNo}}）</span></div></div>
      </div>
      <div class="btn" @click="repay" v-if="canClick=='true'">确认取现</div>
      <div class="btn1" v-else>确认取现</div>
      <!-- 支付验证码弹框 -->
      <div class="verification" v-if="code.isShow">
          <div class="verificationBox">
              <div class="title">请输入支付验证码</div>
              <div class="codeBox">
                  <input type="text" v-model="code.code">
                  <div @click="getCode">{{code.mesg}}</div>
              </div>
              <div class="footer1">
                  <div class="left" @click="cancel">放弃支付</div>
                  <div class="right" @click="toPay">确认支付</div>
              </div>
          </div>
      </div>
      
      
  </div>
</template>

<script>
import Vue from 'vue'
import '../../../js/lib/flexble.js'
import commons from '../../../common/js/common.js'
import Top from 'components/Header/Header'
import { Indicator, MessageBox } from "mint-ui";
export default {
  name: 'shouTogetchash',
  components: { Top },
  data() {
    return {
      methodList: {},
      headTitle: '',
      canClick:'',
      queryData:{},
      orderNo:'',
      code:{
          isShow:false,
          mesg:'获取验证码',
          time:60,
          flag:true,
          code:''
      },
      flag:true,
      spinnerShow:false,
    }
  },
  mounted(){
    Vue.http.interceptors.push((request, next) => { //请求拦截器
      //请求前
      request.headers.set('token', commons.getCookie('token')); //设置请求头
      Indicator.open('加载中...'); //请求loading
      next((response) => {
        //请求后
        Indicator.close(); //隐藏loading
        return response
      })
    })
    this.canClick = window.sessionStorage.getItem('canClick');
    console.log(this.canClick)
    
    this.methodList = JSON.parse(window.sessionStorage.getItem('shouTogetchashObj'));
    this.methodList.money=(this.methodList.money*1).toFixed(2);
    this.methodList.reachMoney=(this.methodList.reachMoney*1).toFixed(2);
    this.methodList.shouxufei=(this.methodList.shouxufei*1).toFixed(2);
    
    this.postData = {
        orderAmount:this.methodList.money,//订单金额
        settlementId:this.methodList.saveId,//结算卡：储蓄卡id
        payId:this.methodList.creditId,//提现卡：信用卡id
        channel:window.sessionStorage.getItem('channel')?window.sessionStorage.getItem('channel'):''
    }
    clearInterval('timer')
  },
  methods: {
    //交易
    repay(){
        
        if(!this.canClick){
            return;
        }

        

        //确认取现，完成后去取现中页面
        this.$http.post('/loansupermarket-pay/pay/createOrder',this.postData).then(function(response){
            var resBody = response.body;
            if(resBody.code=='000'){
                window.sessionStorage.setItem('canClick','false');
                this.orderNo=resBody.data.orderNo;
                //弹出对话框，并且自动发送验证码
                this.code.isShow=true;//显示弹框
                this.getCode();//发送验证码
                
            }else if(resBody.code == '444'){
                // this.$router.push({path:'/login'});
                window.location.href='../user/login.html';
            }else{
                if(resBody.mesg){
                    MessageBox.alert(resBody.mesg, '提示');
                }
            }
        })
      
    },
    //手续费提示
    msg(){
        MessageBox.alert('当前取现手续费为'+this.methodList.enchashment_rate+'%');
    },
    //获取验证码
    getCode(){
      if(!this.code.flag){
        return;
      }
      // 验证码60s
      this.code.flag = !this.code.flag;
      let time = 60;
      let that = this;
      if (!this.code.flag) {
        var timer = setInterval(function () {
          time -= 1;
          that.code.mesg = time + 's后可重新获取';
          if (time == 0) {
            clearInterval(timer);
            that.code.mesg = '获取验证码'
            that.code.flag = true;
          }
        }, 1000)
      };
      // 获取短信验证码
      this.$http.post('/loansupermarket-pay/pay/sendPayValidateCode',{orderNo:this.orderNo})
        .then((response) => {
        var resBody = response.body;
        if (resBody.code == '000') {
            
        }else if(resBody.code == '444'){
            // this.$router.push({path:'/login'});
            widow.location.href='../user/login.html';
        }else if(resBody.code=='114'){//卡被删除过，无法取现
            this.code.isShow=false;//隐藏弹框
            this.canClick='false';
            MessageBox.alert(resBody.mesg, '提示');
            return;
        }else {
            this.code.flag = !this.code.flag;
            MessageBox.alert(resBody.mesg, '提示');
            clearInterval(timer);
            that.codeTime = '获取验证码'
          }
        })

    },
    cancel(){
        this.code.isShow=false;
        window.sessionStorage.setItem('canClick','true');
    },
    toPay(){
        this.spinnerShow=true;
        this.$http.post('/loansupermarket-pay/pay/bindCardPay',{orderNo:this.orderNo,validateCode:this.code.code})
        .then((response) => {
            var resBody = response.body;
            var resCode = resBody.code;
            this.spinnerShow=false;
            if(resCode=='000'||resCode=='001'||resCode=='111'||resCode=='222'){
                this.code.isShow=false;//隐藏弹框
                // this.$router.push({path:'/main/mine/enchash/repayStatus',query: {code:resCode,order_no:this.orderNo,mesg:resBody.mesg}});
                window.location.href='./repayStatus.html?code='+resCode+'&order_no='+this.orderNo+'&mesg='+resBody.mesg;
            }else if(resBody.code == '444'){
                // this.$router.push({path:'/login'});
                window.location.href='../user/login.html';
            }else {
                if(resBody.mesg){
                    MessageBox.alert(resBody.mesg, '提示');
                }
                
            }
        })
    }
    
  }
}
</script>
<style lang="scss" scoped>
@import '../../../scss/base.scss';
.item{
        background:#fff;
        padding:0 0.5333rem;
        padding-top: 1.2rem;
        &-list{
            height: 1.333rem;
            line-height: 1.333rem;
            border-bottom: 1px solid #e5e5e5;
            &-left{
                float: left;
                width: 30%;
                text-align: left;
                font-size: 0.373333rem;
                color: $grayColor;
            }
            &-right{
                float:left;
                width: 70%;
                text-align: left;
                font-size: 0.4rem;
                color:#333;
                height: 1.333rem;
                overflow: hidden;
                em{
                    font-style: normal;
                }
                i{
                    float: right;
                    width: 0.4rem;
                    height: 0.4rem;
                    margin-top:0.43rem ;
                    background: url(../../../assets/enchash/tishi.png);
                    background-size: 0.4rem 0.4rem;
                }
                img{
                    float: left;
                    width: 0.58666rem;
                    height: 0.58666rem;
                    margin-top: 0.373333rem;
                    margin-right: 0.16rem;
                    span{
                        float: left;
                    }
                }
            }
        }
    }
    .btn{
        width: 9rem;
        height: 1.2rem;
        line-height: 1.2rem;
        background: linear-gradient(to right,#2ce9e8,#7cd7ff);
        color: #ffffff;
        margin: 0 auto;
        margin-top: 0.8rem;
        font-size: 0.45333rem;
        border-radius: 0.15rem;
    }
    .btn1{
        width: 9rem;
        height: 1.2rem;
        line-height: 1.2rem;
        background: #ccc;
        color: #ffffff;
        margin: 0 auto;
        margin-top: 0.8rem;
        font-size: 0.45333rem;
        border-radius: 0.15rem;
    }
    .verification{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.3);
        z-index: 2000;
        .verificationBox{
            position: absolute;
            top: 50%;
            left:50%;
            width: 7.6rem;
            height: 3.4rem;
            margin-top: -1.7rem;
            margin-left: -3.8rem;
            background: #fff;
            border-radius: 0.15rem;
            .title{
                height: 1.2rem;
                line-height: 1.2rem;
                font-size: 0.4rem;
            }
            .codeBox{
                height: 0.8rem;
                line-height: 0.8rem;
                input{
                    float: left;
                    margin-left: 10%;
                    width: 40%;
                    height:0.8rem;
                    border: 1px solid #ccc;
                    box-sizing: content-box;
                }
                div{
                    float: left;
                    width:39%;
                    height: 0.8rem;
                    line-height: 0.8rem;
                    border: 1px solid #ccc;
                    box-sizing: content-box;
                    border-left: none;
                }
            }
            .footer1{
                margin-top:0.4rem;
                height: 1rem;
                line-height: 1rem;
                border-top:1px solid #ccc;
                .left{
                    float: left;
                    width: 50%;
                    position: relative;
                }
                .left::after{
                    content: '';
                    position: absolute;
                    right: 0;
                    top: 0;
                    width: 1px;
                    height: 1rem;
                    background: #ccc;
                }
                .right{
                    float: right;
                    width: 50%;
                }
            }
        }
    }

</style>
